<template>
  <div class="article-list-container">
    <!-- xia拉加载组件 -->
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
      <van-list
        v-model="loading"
        :finished="finished"
        finished-text="没有更多了"
        @load="onLoad"
      >
        <!-- van-cell组件抽离 -->
        <article-item :articleList="articleList"></article-item>
        <!-- van-cell组件抽离-->
      </van-list>
    </van-pull-refresh>

    <!-- 上拉加载组件 -->
  </div>
</template>

<script>
import articleItem from "./article-item.vue";
import { channelsApi, articlesApi } from "@/api";
export default {
  props: {
    //  获取传过来的id   没传就去默认值  为推荐的id为0
    Channel: {
      type: Object,
      default: () => {
        //
        return {
          id: 0,
          name: "推荐"
        };
      }
    }
  },
  data() {
    return {
      //list 下拉列表数据
      list: {},
      loading: false,
      finished: false,
      // articles: { channel_id: 0, timestamp: Date.now(), with_top: 1 },
      articleList: [],
      timenow: null,
      isLoading: false
    };
  },
  methods: {
    //list 上拉列表事件
    async getArticleData() {
      const res = await articlesApi({
        channel_id: this.Channel,
        // 表示还可以获取之前的数据  pre_timestamp
        timestamp: this.timenow || Date.now(),
        with_top: 1
      });
      // console.log(res.data.data.results, 888888);
      this.articleList = res.data.data.results;
    },
    // 上拉列表事件
    async onLoad() {
      const res = await articlesApi({
        channel_id: this.Channel.id,
        timestamp: this.timenow || Date.now(),
        with_top: 1
      });
      // console.log(res.data.data.results, 888888);
      this.articleList.push(...res.data.data.results);
      // 加载状态结束    //  获取数据成功后就结束加载状态效果
      this.loading = false;
      //  判断是否关闭下滑组件   finished=====没有数据了就设置finished=true  下滑组件就不会再触发了
      if (res.data.data.results.length) {
        this.timenow = res.data.pre_timestamp;
      } else {
        this.finished = true;
      }
    },
    // 实现下拉刷新的效果
    async onRefresh() {
      const res = await articlesApi({
        channel_id: this.Channel.id,
        timestamp: Date.now(),
        with_top: 1
      });
      // console.log(res.data.data.results, 888888);
      this.articleList.unshift(...res.data.data.results);
      this.isLoading = false;
    }
  },
  components: {
    articleItem
  }
};
</script>
<style scoped lang="less">
.article-list-container {
  //中间数据盒子
  /deep/ .van-tabs__content {
    height: 1000px;
    overflow-y: auto;
  }
}
</style>
